<template>
    <div>颜色：  <span v-for="item in colors" :key="item" class="box" @click="selectColor(item)" :class="{active:item===color}">{{item}}</span> </div>
</template>
<script>
export default {
    data(){
      return{
          color:''
      }
    },
    props:{
        colors:Array
    },
    methods:{
        selectColor(color){
            console.log('selectColor color',color);
            this.color=color;
            this.$emit("onSelectColor",color);
        }
    }

}
</script>
<style scoped>
.box{
display:inline-block;
margin-right:10px;
border:1px solid gray; 
padding:4px}
.active{
    background:pink;
}
</style>